<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('综合图表')" />
</head>
<body>
<div class="container" style="padding-top: 10px">
        <div class="row">
            <div class="col-md-12">
                <form id="queryForm">
                    <div class="select-list">
                        <ul id="queryUl" th:utext="${html}">

                        </ul>
                    </div>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div name="viewContent" type="chart" style="margin-top: 15px">
                    <div name="param" style="display: none">{"chartStyleVO":{"title":"","chartType":"pie","chartXVO":{"fieldName":"na_dim_regca","num":""},"chartYVOList":[{"fieldName":"idx_mjzrc"},{"fieldName":""},{"fieldName":""}]},"queryParamVO":{"startDate":"2020-01-01","endDate":"2020-01-01","dimVOList":[{"idPubfld":"ID_DIM_REGCA"}],"idIndexs":["IDX_MJZRC"],"dateType":"D"}}</div>
                    <div name="chart"></div>
                </div>
            </div>
            <div class="col-md-6"></div>
        </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script>
    function refresh() {
        var value ,name;
        $("div[name=viewContent]").each(function (index,item) {
            if($(this).attr("type")=="chart") {
                var paramDiv = $(this).find("div[name=param]");
                var chartDiv = $(this).find("div[name=chart]");
                chartDiv.css("height","400px");
                var param = JSON.parse(paramDiv.html());
                $("#queryForm").find("input").each(function (index,item) {
                    value = $(item).val();
                    if(value!=undefined) {
                        name = $(item).attr("name");
                    }
                    if("startDate"==name) {
                        param.queryParamVO.startDate=value;
                    } else if("endDate"==name) {
                        param.queryParamVO.endDate=value;
                    } else {
                        //param.queryParamVO.dimVOList
                    }
                });
                $.ajax({
                    url: '/hdw/qry/chart/baseQry',
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(param),
                    success: function (result) {
                        if(result.code==0) {
                            var option = eval('(' + result.data + ')');
                            var echartsInstance=echarts.init(chartDiv[0]);
                            echartsInstance.setOption(option);
                        }
                    }
                });
            }
        });
    }
    $(function() {
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            var now = new Date();
            var startDate = laydate.render({
                elem: '#laydate-startDate',
                max: now.getFullYear()+"-"+(now.getMonth() + 1)+"-"+now.getDate(),
                theme: 'molv',
                trigger: 'click'
            });
            var endDate = laydate.render({
                elem: '#laydate-endDate',
                max: now.getFullYear()+"-"+(now.getMonth() + 1)+"-"+now.getDate(),
                theme: 'molv',
                trigger: 'click'
            });
        });
    });
</script>
</body>
</html>